<template>
  <!-- 知识计算-融合规则 -->
  <div class="general-page">
    <!-- <el-form :inline="true" v-model="searchParams" class="page-search">
      <el-form-item label="规则名称">
        <el-input
          v-model="searchParams.name"
          placeholder="请输入内容"
          clearable
          size="small"
          style="width: 240px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="searchData"
          style="width: 60px"
          >查询</el-button
        >
      </el-form-item>
    </el-form> -->
    <div class="page-table">
      <div class="table-toolbar">
        <div class="table-title">融合规则</div>
        <div class="table-opera">
          <el-button type="primary" size="small" @click="addFusionRule">
            新建规则
          </el-button>
        </div>
      </div>
      <el-table
        :data="tableList"
        class="map-manage"
        v-loading="loading"
        :header-cell-style="{ background: '#F3F4F8', color: '#000000' }"
        :cell-style="{ color: '#333333' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="规则名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="scope"
          label="适用范围"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ transScope(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column prop="ruleCondition" label="规则条件" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.ruleCondition === 1">
              以统计数量最高
            </template>
            <template v-else-if="scope.row.ruleCondition === 2">
              以置信度最高
            </template>
            <template v-else-if="scope.row.ruleCondition === 3">
              以最近更新
            </template>
            <template v-else> --- </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="规则描述"
          align="right"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          fixed="right"
          align="center"
          class="operation"
        >
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.status === 0"
              class="handle-button"
              :underline="false"
              type="primary"
              @click.native.prevent="editRule(scope.row)"
              >编辑</el-link
            >
            <el-link
              v-if="scope.row.status === 0"
              :underline="false"
              class="handle-button"
              type="primary"
              @click.native.prevent="delRule(scope.row)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination" v-if="total">
        <el-pagination
          background
          layout="total, prev, pager, next,sizes, jumper"
          :total="total"
          :pager-count="5"
          :page-sizes="[10, 20, 30]"
          :current-page.sync="searchParams.pageNum"
          :page-size.sync="searchParams.pageSize"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <OperaRule ref="operaRuleRef" @reload="getPageData" />
  </div>
</template>
<script>
import OperaRule from "./components/OperaRule.vue";
export default {
  name: "FusionRule",
  components: { OperaRule },
  data: () => {
    return {
      searchParams: {
        pageNum: 1, // 页码
        pageSize: 10, // 每页条数
      },
      tableList: [], // 数据列表
      total: 0, // 数据总条数
      loading: false,
    };
  },
  created() {
    this.getPageData();
  },
  methods: {
    getPageData() {
      this.loading = true;
      this.$axios
        .get(this.$api.knowledgeComputation.fusionRule.getFusionRuleList, {
          params: this.searchParams,
        })
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.tableList = data.list;
            this.total = data.total;
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 转换适用范围
    transScope(row) {
      let res = "---";
      try {
        if (row.scopeType === 1) {
          res = "全部图谱";
        } else {
          const scope = JSON.parse(row.scope);
          res = scope.map((i) => i.name).join("、");
        }
      } catch {}
      return res;
    },
    // 查询
    // searchData() {
    //   this.getPageData();
    // },
    // 新建规则
    addFusionRule() {
      this.$refs.operaRuleRef.openDialog();
    },
    // 编辑融合规则
    editRule(row) {
      this.$refs.operaRuleRef.openDialog(row);
    },
    // 删除融合规则
    delRule(row) {
      this.$confirm("此操作将删除此数据，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete(this.$api.knowledgeComputation.fusionRule.delFusionRule, {
              params: { id: row.id },
            })
            .then((res) => {
              const { data, message, code } = res.data;
              if (code === 200) {
                this.getPageData();
                this.$message.success(message);
              } else {
                this.$message.warning(message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    handleCurrentChange() {
      this.getPageData();
    },
    handleSizeChange() {
      this.getPageData();
    },
  },
};
</script>
